<template>
  <a-modal
    class="image-cropper"
    v-model:open="visible"
    :footer="false"
    @cancel="closeModal"
    :maskClosable="false"
    :width="800"
    :style="{ maxWidth: '98vw' }"
  >
    <template #title>
      <h3 style="font-weight: bold; font-size: 22px; text-align: center">
        AI 扩图
        <a-popconfirm
          title="AI 扩图图片要求"
          :show-cancel="false"
          :show-confirm="false"
        placement="right"
        :width="300"
        >
          <template #description>
            - 图像格式：JPG、JPEG、PNG、HEIF、WEBP<br>
            - 图像大小：不超过 10MB <br>
            - 图像分辨率：不低于 512×512 像素且不超过 4096×4096 像素<br>
            - 图像单边长度范围：[ 512, 4096 ]，单位像素
          </template>
        <ExclamationCircleOutlined style="margin-left: 8px; cursor: pointer; color: #faad14;font-size: 16px" />
        </a-popconfirm>
      </h3>
    </template>

    <!-- 图片展示区域容器 -->
    <div class="image-container">
      <!-- 初始状态：仅显示原图在中间 -->
      <div v-if="!outPaintingUrl" class="initial-state">
        <div class="image-wrapper">
          <!-- 图片容器，添加阴影和边框 -->
          <h4 class="image-title">原始图片</h4>
          <img :src="picture?.url" :alt="picture?.name" class="original-image" />
        </div>
      </div>

      <!-- 生成图片后：左右布局 -->
      <a-row gutter="16" v-else class="result-layout">
        <a-col :xs="24" :md="12" class="image-column">
          <!-- 响应式列：小屏占满，中屏半宽 -->
          <div class="image-wrapper">
            <!-- 图片容器，添加阴影和边框 -->
            <h4 class="image-title">原始图片</h4>
            <img :src="picture?.url" :alt="picture?.name" class="display-image" />
          </div>
        </a-col>
        <a-col :xs="24" :md="12" class="image-column">
          <!-- 响应式列：小屏占满，中屏半宽 -->
          <div class="image-wrapper">
            <!-- 图片容器，添加阴影和边框 -->
            <h4 class="image-title">扩图结果</h4>
            <img :src="outPaintingUrl" :alt="picture?.name" class="display-image" />
          </div>
        </a-col>
      </a-row>
    </div>

    <div style="margin-bottom: 16px" />

    <!-- 按钮区域，添加阴影 -->
    <div class="button-container">
      <a-flex gap="16" justify="center">
        <a-button
          style="background-color: rgba(154, 104, 151, 0.84); border-radius: 12px"
          :loading="!!taskId"
          type="primary"
          @click="createTask"
          >生成图片</a-button
        >
        <a-button
          style="background-color: #4caf50; border-radius: 12px"
          :loading="uploadLoading"
          v-if="outPaintingUrl"
          type="primary"
          @click="handleUpload"
          >应用结果</a-button
        >
      </a-flex>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { onUnmounted, ref } from 'vue'
import {
  createPictureOutPaintingTaskUsingPost,
  getOutPaintingTaskUsingGet,
  uploadPictureByUrlUsingPost,
} from '@/api/pictureController'
import { message } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'

// 父组件传入的参数
interface Props {
  picture?: API.PictureVO
  spaceId?: number
  onSuccess?: (newPicture: API.PictureVO) => void
}

const props = defineProps<Props>()

// ------------ AI 扩图 -----------
// 扩图任务 id
let taskId = ref<string>()
// 扩图结果图片 URL
const outPaintingUrl = ref<string>('')

// 调用后端 AI 扩图接口,创建扩图任务
const createTask = async () => {
  if (!props.picture?.id) {
    return
  }
  // 调用接口 AI 扩图
  const res = await createPictureOutPaintingTaskUsingPost({
    pictureId: props.picture?.id,
    parameters: {
      // TODO 这里可以根据官方文档填写修改扩图参数
      xScale: 2,
      yScale: 2,
    },
  })
  // 处理接口返回结果
  if (res.data?.code === 0 && res.data?.data) {
    message.success('扩图任务创建成功，请耐心等待，不要退出该页面')
    taskId.value = res.data.data.output?.taskId
    console.log('taskId:' + taskId.value)
    // 轮询获取扩图结果 (开启轮询)
    startPolling()
  } else {
    message.error(`扩图任务创建失败: ${res.data?.message || '未知错误'}`)
  }
}

// ------------- 轮询获取扩图结果 -------------
// 轮询定时器
// @ts-ignore
let pollingTimer: NodeJS.Timeout = null

// 清理轮询定时器
const clearPolling = () => {
  if (pollingTimer) {
    clearInterval(pollingTimer)
    pollingTimer = null
    taskId.value = ''
  }
}

// 开始轮询
const startPolling = () => {
  if (!taskId.value) return

  pollingTimer = setInterval(async () => {
    try {
      const res = await getOutPaintingTaskUsingGet({
        taskId: taskId.value,
      })
      if (res.data.code === 0 && res.data.data && res.data.data?.output) {
        const taskResult: API.Output1 = res.data.data.output
        if (taskResult.taskStatus === 'SUCCEEDED') {
          message.success('扩图任务成功')
          // @ts-ignore
          outPaintingUrl.value = taskResult.outputImageUrl
          clearPolling()
        } else if (taskResult.taskStatus === 'FAILED') {
          message.error('扩图任务失败')
          // 清理定时器
          clearPolling()
        }
      }
    } catch (error) {
      console.error('轮询任务状态失败', error)
      message.error('检测任务状态失败，请稍后重试')
      // 清理定时器
      clearPolling()
    }
  }, 3000) // 每隔 3 秒轮询一次
}

// 清理定时器，避免内存泄漏
onUnmounted(() => {
  clearPolling()
})

// ------------- AI 扩图替换原图 ----------------
const uploadLoading = ref(false)

/**
 * 上传 AI 扩图后的图片
 */
const handleUpload = async () => {
  // 验证URL是否为空
  if (!outPaintingUrl.value) {
    return
  }
  // 开始上传，设置加载状态
  uploadLoading.value = true

  try {
    // 准备上传参数（包含可能的编辑ID）
    const params: API.PictureUploadDTO = {
      fileUrl: outPaintingUrl.value,
      spaceId: props.spaceId,
    }
    if (props.picture) {
      params.id = props.picture.id
    }

    // 调用接口上传图片
    const res = await uploadPictureByUrlUsingPost(params)

    // 处理接口返回结果
    if (res.data?.code === 0 && res.data?.data) {
      message.success('操作成功')
      // 调用父组件的成功回调，传递新图片信息
      props.onSuccess?.(res.data.data)
      // 关闭模态框
      closeModal()
    } else {
      message.error(`AI 扩图失败: ${res.data?.message || '未知错误'}`)
    }
  } catch (e) {
    console.error('AI 扩图图片上传异常:', e)
    message.error('扩图上传失败，请稍后重试')
  } finally {
    // 无论成功失败，都结束加载状态
    uploadLoading.value = false
  }
}

// ------ 模态框区域 ----------
// 是否可见
const visible = ref(false)

// 打开弹窗
const openModal = () => {
  visible.value = true
}

// 关闭弹窗
const closeModal = () => {
  visible.value = false
}

// 暴露函数给父组件
defineExpose({
  openModal,
})
</script>

<style scoped>
.image-cropper {
  text-align: center;
  padding: 16px 0;
}

/* 图片容器整体样式 */
.image-container {
  margin: 16px 0;
  transition: all 0.3s ease; /* 平滑过渡动画 */
}

/* 初始状态样式 - 原图居中显示 */
.initial-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

/* 生成结果后的布局 */
.result-layout {
  width: 100%;
  margin: 0 auto;
}

/* 图片列样式 */
.image-column {
  display: flex;
  justify-content: center;
  margin-bottom: 16px; /* 移动端列之间的间距 */
}

/* 图片展示容器 - 添加阴影和边框区分区域 */
.image-wrapper {
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14); /* 添加阴影效果 */
  width: 100%;
  max-width: 450px; /* 限制最大宽度 */
  transition: box-shadow 0.3s ease;
  /* 新增以下3行：让图片在容器内居中 */
  display: flex;
  flex-direction: column; /* 垂直方向排列标题和图片 */
  align-items: center; /* 水平居中 */
}

/* 鼠标悬停效果 */
.image-wrapper:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 图片标题样式 */
.image-title {
  margin-bottom: 12px;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

/* 原图样式 */
.original-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 4px;
  object-fit: contain; /* 保持图片比例 */
}

/* 展示图片通用样式 */
.display-image {
  max-width: 100%;
  max-height: 350px; /* 左右布局时适当减小高度 */
  border-radius: 4px;
  object-fit: contain; /* 保持图片比例 */
}

/* 按钮区域样式 - 添加阴影 */
.button-container {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 按钮区域阴影 */
  margin-top: 16px;
}

/* 按钮悬停效果 - 新增样式 */
:deep(.ant-btn-primary.ghost) {
  transition: all 0.3s ease; /* 平滑过渡动画 */
}

:deep(.ant-btn-primary.ghost:hover) {
  background-color: rgba(138, 43, 226, 0.1); /* 淡紫色背景 */
  color: #8a2be2; /* 深紫色文字 */
  transform: translateY(-2px); /* 轻微上浮效果 */
  box-shadow: 0 4px 8px rgba(138, 43, 226, 0.2); /* 紫色阴影 */
}

:deep(.ant-btn-primary:not(.ghost)) {
  transition: all 0.3s ease; /* 平滑过渡动画 */
}

:deep(.ant-btn-primary:not(.ghost):hover) {
  transform: translateY(-2px); /* 轻微上浮效果 */
  box-shadow: 0 4px 12px rgba(248, 90, 90, 0.3); /* 红色阴影加深 */
  opacity: 0.95; /* 轻微透明效果 */
}

/*--------- 气泡确认框 -------------*/
/* 气泡确认框整体样式优化 */
:deep(.ant-popconfirm) {
  /* 调整弹出动画 */
  animation: fadeIn 0.2s ease-out;
}

/* 气泡框内容区域样式 */
:deep(.ant-popconfirm-message) {
  padding: 12px 16px !important;
  color: #333;
  font-size: 14px;
  line-height: 1.6; /* 增大行高，提升可读性 */
}

/* 气泡框标题样式 */
:deep(.ant-popconfirm-message-title) {
  font-weight: bold !important;
  color: #1890ff !important; /* 标题使用主题色 */
  margin-bottom: 8px !important;
  padding-bottom: 4px !important;
  border-bottom: 1px dashed #e8e8e8 !important; /* 标题下方添加分隔线 */
}

/* 气泡框描述文本样式（自动换行） */
:deep(.ant-popconfirm-message-description) {
  white-space: pre-line !important; /* 保留换行符，自动换行 */
  padding-left: 4px !important;
}

/* 气泡框箭头样式调整 */
:deep(.ant-popover-arrow) {
  display: none; /* 隐藏箭头，更简洁 */
}

/* 气泡框背景和阴影 */
:deep(.ant-popover-inner) {
  background-color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important; /* 增强阴影，提升层次感 */
  border: none !important; /* 去除边框 */
}

/* 悬停图标效果 */
:deep(.anticon-exclamation-circle) {
  transition: all 0.2s ease;
}
:deep(.anticon-exclamation-circle:hover) {
  transform: scale(1.1); /* 鼠标悬停时图标轻微放大 */
  color: #fa8c16 !important;
}

/* 气泡框弹出动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .image-wrapper {
    padding: 18px;
  }

  .original-image,
  .display-image {
    max-height: 350px;
  }

  .image-title {
    font-size: 14px;
  }
}

@media (min-width: 769px) {
  .image-column {
    margin-bottom: 0;
  }
}
</style>
